<template>
    <div id="{{id}}">
        <div class="t_left">
            <div>
                <table class="table table-striped">
                    <tr>
                        <th id="idHead" rowspan="2">
                            <div class="twoLineHeight" style="text-align: center;"> {{table.idName}}</div>
                        </th>
                    </tr>
                </table>
            </div>
            <div class="cl_freeze">
                <table class="table table-striped">
                    <tr v-for="item in table.idList" track-by="$index">
                        <td>
                            <div style="text-align: center;" @click="nameClick($index)">{{item}}</div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="t_r">
            <div class="t_r_t">
                <div class="t_r_title">
                    <table class="table table-bordered">
                        <tr>
                            <th v-for="name in table.fixNameList"
                                colspan="{{name.supperName?2:1}}"
                                rowspan="{{name.supperName?1:2}}">
                                <div :style="{width:calcWidth(name.supperName?name.supperName:name.cnName)}"
                                     :class="name.supperName?'':'twoLineHeight'"
                                     style="text-align: center;margin:0 auto;letter-spacing: 1px;">
                                    {{name.supperName?name.supperName:name.cnName}}
                                </div>
                            </th>
                        </tr>

                        <tr>
                            <th v-for="name in table.nameList"
                                align="center" valign="middle"
                                v-if="name.supperName">
                                <div :style="{width:calcWidth(name.cnName)}"
                                     style="text-align: center;">
                                    {{name.cnName}}
                                </div>
                            </th>
                        </tr>
                    </table>
                </div>
            </div>

            <div class="t_r_content">
                <table class="table table-bordered">
                    <tr v-for="item in table.valueList">
                        <td v-for="name in table.nameList | orderBy 'index' 'subIndex'">
                            <div :style="{width:calcWidth(name.cnName)}"
                                 style="word-wrap:break-word;text-align: center;">
                                {{item[name.enName].value}}
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</template>
<style>
    #idHead {
        height: 74px;
    }

    .twoLineHeight {
        line-height: 56px;
    }

    table {
        width: 100%;
        background: #fff;
        margin-bottom: 0 !important;

    }

    .t_left {
        width: 7rem;
        height: auto;
        float: left;
    }

    /*t_r_content和cl_freeze高度相差20px， 高度为外观显示高度，可根据情况调整*/
    .t_r_content {
        width: 100%;
        overflow: auto;

    }

    .cl_freeze {
        overflow: hidden;
        width: 100%;

    }

    .t_r {
        /*Standard */
        width: calc(100% - 7rem);
        height: auto;
        float: left;

    }

    .t_r_t {
        overflow: hidden;
    }

    /*.bordertop {*/
    /*border-top: 0px;*/
    /*}*/
</style>
<script>
    import * as FWindow from '../util/FWindow'
    import * as FXML from '../util/FXML'

    function resize(t_r_content, cl_freeze, heightRate, heightFix) {
        var {height} = FWindow.windowSize();
        var h = heightRate ? height * heightRate : height;
        h = heightFix ? h + Number(heightFix) : h;
        t_r_content.style.height = h + 'px';
        cl_freeze.style.height = h + 'px'
    }
    export default{
        props: ['table', 'id',
            'headHeight',
            'minWidth', 'heightRate',
            'heightFix', 'callback'],
        data(){
            return {
                t_r_content: '',
                cl_freeze: '',
                t_r_t: ''
            }

        },
        methods: {
            scroll(){
                var a = this.t_r_content.scrollTop;
                var b = this.t_r_content.scrollLeft;
                this.cl_freeze.scrollTop = a;
                this.t_r_t.scrollLeft = b;
            },
            calcWidth(value){
                var str = value.replace(/[^\u0000-\u00FF]/g, '**')
                var length = str.length * 10
                length = length < this.minWidth ? this.minWidth : length
                return length + 'px'
            },
            nameClick(index){
                var name = this.table.idList[index]
                if (this.callback) {
                    var f = this.$parent[this.callback]
                    f(name, this.$parent)
                }
            }
        },
        ready(){
            this.t_r_content = document.getElementById(this.id).querySelector('.t_r_content');
            this.cl_freeze = document.getElementById(this.id).querySelector(".cl_freeze");
            this.t_r_t = document.getElementById(this.id).querySelector(".t_r_t");

            var heightRate = this.heightRate
            var heightFix = this.heightFix
            resize(this.t_r_content, this.cl_freeze, heightRate, heightFix)
            $(window).resize(function () {
                resize(this.t_r_content, this.cl_freeze, heightRate, heightFix)
            })
            this.t_r_content.addEventListener("scroll", this.scroll);

        },

        parseXml: function (data, idName, callback) {
            var tableCtx = this;
            var parseString = require('xml2js').parseString;
            var xml = FXML.toString(data);
            parseString(xml, function (err, result) {
                var root = result[Object.keys(result)[0]]
                var header = root.point_header[0].point[0]
                var pointCount = (root.pointcount || root.pointCount)[0];
                var points = root.points[0].point

                var headerList = Object.entries(header).map(function (item, index) {
                    return {enName: item[0], cnName: item[1][0], index: index}
                })
                var pointList = points.map(function (item) {
                    var change = {}
                    for (var k in item) {
                        change[k] = item[k][0]
                    }
                    return change
                })
                var list = tableCtx.filter(pointList, headerList, idName);
                callback(list, pointCount)
            });
        },

        filter: function (list, header, idName) {
            var headerList = {};
            for (var i = 0, index = 0; i < header.length; i++) {
                var h = header[i];
                if (!header[i].children) {
                    headerList[h.enName] = {
                        cnName: h.cnName,
                        index: index
                    }
                    index++;
                } else {
                    for (var j = 0; j < h.children.length; j++) {
                        headerList[h.children[j].enName] = {
                            supperName: h.cnName,
                            cnName: h.children[j].cnName,
                            index: index,
                            subIndex: h.children[j].index
                        }
                        index++;
                    }
                }
            }
            list = list.map(function (item) {
                var result = []
                for (var k in item) {
                    var object = {
                        enName: k,
                        value: item[k],
                    }
                    if (headerList[k]) {
                        object.cnName = headerList[k].cnName;
                        object.supperName = headerList[k].supperName;
                        object.index = headerList[k].index;
                        if (headerList[k].subIndex)
                            object.subIndex = headerList[k].subIndex;
                        result.push(object)
                    }
                }
                result.sort(function (a, b) {
                    if (a.subIndex && b.subIndex) {
                        return a.subIndex - b.subIndex
                    }
                    return 0
                }).sort(function (a, b) {
                    return a.index - b.index
                })
                return result
            })

            var nameList = list[0].filter(function (item) {
                return item.enName != idName
            });
            var fixNameList = (function (nameList) {
                var firstHeadNames = []
                return nameList.map(function (item) {
                    if (!item.supperName)
                        return item;
                    if (firstHeadNames.indexOf(item.supperName) == -1) {
                        firstHeadNames.push(item.supperName);
                        return item;
                    }
                }).filter(function (item) {
                    return item != null
                })
            })(nameList);

            return {
                idName: headerList[idName].cnName,
                nameList: nameList,
                fixNameList: fixNameList,
                idList: list.map(function (item) {
                    return item[0].value;
                }),
                valueList: list.map(function (item) {
                    var obj = {}
                    item.forEach(function (cell) {
                        obj[cell.enName] = {
                            value: cell.value,
                            index: cell.index
                        }
                        obj[cell.enName].subIndex = headerList[cell.enName].subIndex
                    })
                    return obj;
                }).filter(function (item) {
                    return item.enName != idName
                }),
            }
        }
    }
</script>
